<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Room - LAN Chat Room</title>
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/room.css">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
    <!-- Loading Screen -->
    <div id="loading-screen" class="loading-screen">
        <div class="loading-spinner"></div>
        <p>Connecting to room...</p>
    </div>

    <!-- Error Display -->
    <div id="error-display" class="error-display hidden">
        <div class="error-content">
            <h3>Connection Error</h3>
            <p id="error-message"></p>
            <div class="error-actions">
                <button id="error-retry" class="btn btn-primary">Retry</button>
                <button id="error-home" class="btn btn-secondary">Return Home</button>
            </div>
        </div>
    </div>

    <!-- Room Container -->
    <div id="room-container" class="room-container hidden">
        <!-- Room Header -->
        <header class="room-header">
            <div class="room-title">
                <h1 id="room-title">Room Name</h1>
                <div class="room-info">
                    <span id="room-member-count">0</span> members online
                    <span id="connection-status" class="connection-status disconnected">
                        <span class="connection-indicator"></span>
                        <span class="status-text">Connecting...</span>
                    </span>
                </div>
            </div>
            <div class="room-actions">
                <button id="invite-link-btn" class="btn btn-secondary">📋 Share Invite</button>
                <button id="leave-room-btn" class="btn btn-danger">Leave Room</button>
            </div>
        </header>

        <!-- Room Content -->
        <div class="room-content">
            <!-- Chat Area -->
            <main class="chat-area">
                <!-- Messages Container -->
                <div id="messages-container" class="messages-container">
                    <div id="messages-list" class="messages-list">
                        <!-- Messages will be dynamically added here -->
                    </div>
                </div>

                <!-- Message Input -->
                <div class="message-input-container">
                    <form id="message-form" class="message-form">
                        <input type="text" id="message-input" placeholder="Type your message..." 
                               maxlength="1000" autocomplete="off">
                        <button type="submit" class="btn btn-primary" id="send-btn">Send</button>
                    </form>
                </div>
            </main>

            <!-- Sidebar -->
            <aside class="sidebar">
                <div class="sidebar-content">
                    <h3>Online Members</h3>
                    <div id="users-list" class="users-list">
                        <!-- User list will be dynamically populated -->
                    </div>
                </div>
            </aside>
        </div>
    </div>

    <!-- Invite Share Modal -->
    <div id="invite-modal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Share Invite Link</h3>
                <button id="invite-modal-close" class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <p>Share this link to invite others to join the room:</p>
                <div class="invite-link-container">
                    <input type="text" id="invite-link-input" readonly>
                    <button id="copy-invite-btn" class="btn btn-primary">Copy</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Connection Status Indicator -->
    <!-- Moved to room header -->

    <!-- JavaScript Files -->
    <script type="module" src="/js/common/storage.js"></script>
    <script type="module" src="/js/common/utils.js"></script>
    <script type="module" src="/js/common/api.js"></script>
    <script type="module" src="/js/room/app.js"></script>
</body>
</html>